<template>
    <view>
        <xy-datetime ref='xy' v-if="Object.keys(initParams).length > 0" :init-params="initParams"
            @onChooseDatetime='onChooseDatetime' />

        <view class="result">
            <view>
                <h3>已选预约</h3>
                <view v-if="selectedBookingsFromChild.length > 0">
                    <view v-for="(booking, index) in selectedBookingsFromChild" :key="index" class="booking-item">
                        <view class="booking-date">日期：{{ booking.date }}</view>
                        <view class="booking-times" v-if="booking.selectedTimes.length > 0">
                            时段：
                            <text v-for="(time, tIndex) in booking.selectedTimes" :key="tIndex">
                                {{ time.Name }}{{ tIndex < booking.selectedTimes.length - 1 ? '、' : '' }}
                            </text>
                        </view>
                        <view class="booking-times" v-else>时段：该日期未选择时段</view>
                    </view>
                </view>
                <view v-else>
                    暂无已选择的预约。
                </view>
            </view>
        </view>

        <view class="button-box">
            <view class="button">
                <u-button type="info" :customStyle="buttonStyle" shape="circle"
                    @click="goSubmit()">确认预约</u-button>
            </view>
        </view>
    </view>
</template>

<script>
import XyDatetime from '@/components/xy-datetime'

export default {
    components: {
        XyDatetime
    },
    data () {
        return {
            selectedBookingsFromChild: [],
            initParams: {},
            buttonStyle: {
                background: '#d28e29',
                color: 'white',
                fontSize: '18px',
                fontWeight: 'bloder',
            },
            params: {
                RoomId: '',
                RoomName: '',
                Photos: '',
                LocationName:''
            }
        }
    },
	
    onLoad (e) {
        console.log('onLoad params:', e);
        if (e && e.RoomId) {
            this.initParams = {
                RoomId: e.RoomId,
				reserveDate: e.reserveDate
            };
            this.params.Photos = e.Photos
            this.params.RoomName = e.RoomName
            this.params.RoomId = e.RoomId
            this.params.LocationName = e.LocationName
			this.params.reserveDate = e.reserveDate
			// reserveDate
        }
    },
    methods: {
        onChooseDatetime (bookings) {
            console.log(bookings,'bookings')
            this.selectedBookingsFromChild = bookings;
            console.log('父组件接收到的预约数据:', JSON.parse(JSON.stringify(this.selectedBookingsFromChild)));
        },
        goSubmit () {
            let timeFrame = JSON.parse(JSON.stringify(this.selectedBookingsFromChild));
            this.params.roomTimes = timeFrame
            console.log('timeFrame:', timeFrame);


            if (timeFrame.length === 0) {
                uni.showToast({
                    title: '请选择预约日期',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }
            const hasAnyTimeSlotSelected = timeFrame.some(booking => {
                const selectableTimes = booking.selectedTimes.filter(time => time.IsReserve === 1);
                return selectableTimes.length > 0;
            });

            if (!hasAnyTimeSlotSelected) {
                uni.showToast({
                    title: '请为已选日期选择至少一个时段',
                    icon: 'none',
                    duration: 2000
                });
                return; // 阻止后续操作
            }
            const finalBookings = timeFrame.filter(booking =>
                booking.selectedTimes.filter(time => time.IsReserve === 1).length > 0
            );

            if (finalBookings.length === 0) {
                uni.showToast({
                    title: '没有有效的预约时段，请重新选择',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }
            uni.setStorageSync('navigateToBookings', finalBookings);
            // 路由跳转，可以将 `finalBookings` 作为参数传递
            uni.$u.route({
                url: 'pages/meeting/myreserve/DayForAddForm',
                params: {
                    RoomId: this.params.RoomId,
					RoomName:this.params.RoomName
                }
                // 可以将数据JSON序列化后传递
            })
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #f1f1f1;
}

.result {
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    text-align: left;
    font-size: 28rpx;

    h3 {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: #333;
    }

    .booking-item {
        margin-bottom: 15rpx;
        padding: 10rpx 0;
        border-bottom: 1rpx dashed #eee;

        &:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .booking-date {
            font-weight: bold;
            color: #5F4743;
            margin-bottom: 5rpx;
        }

        .booking-times {
            color: #666;

            text {
                font-weight: normal;
            }
        }
    }
}

.button-box {
    padding: 0 10px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.button {
    width: 70%;
}
</style>